<template>
	<view class="content font_family">
		<view class="item f_z_b">
			<view class="left">
				个人头像
			</view>
			<view class="right">
				<button open-type="chooseAvatar" class="f_j" @chooseavatar="chooseavatar">
					<image class="avatar" :src="user_info.avatar" mode="aspectFill"></image>
					<image class="go" src="../../static/public/go.png" mode=""></image>
				</button>
			</view>
		</view>
		<view class="item f_z_b">
			<view class="left">
				用户昵称
			</view>
			<view class="right">
				<input type="nickname" v-model="user_info.username" class="name_ipt" @blur="set_name">
			</view>
		</view>
		<view class="item f_z_b" @click="bd">
			<view class="left">
				手机号绑定
			</view>
			<view class="right">
				{{user_info.openid?user_info.mobile:'未绑定'}}
			</view>
		</view>
		<view class="item f_z_b" @click="go('/pages/my_msg/dp_msg')">
			<view class="left">
				店铺信息
			</view>
			<view class="right">
				<image class="go" src="../../static/public/go.png" mode=""></image>
			</view>
		</view>
		<button class="item f_z_b" open-type="contact">
			<view class="left">
				联系我们
			</view>
			<view class="right">
				<image class="go" src="../../static/public/go.png" mode=""></image>
			</view>
		</button>
		<view class="item f_z_b" v-for="(item,index) in xy" :key="index" @click="go(item.url)">
			<view class="left">
				{{item.title}}
			</view>
			<view class="right">
				<image class="go" src="../../static/public/go.png" mode=""></image>
			</view>
		</view>
		<view class="logout">
			<view class="btn f_zj" @click="logout">
				退出登录
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { mapState, mapActions, mapMutations } from 'vuex'
	import { profile, logout, binding, remove } from '@/api/user.js'
	export default {
		computed: {
			...mapState(['user_info'])
		},
		data() {
			return {
				xy: [
					{ title: '服务协议', url: '/pages/public/public?title=服务协议' },
					{ title: '平台信息管理规范', url: '/pages/public/public?title=平台信息管理规范' },
				],
			}
		},
		methods: {
			...mapActions(['get_user']),
			...mapMutations(['set_user_info']),
			// 更改头像
			chooseavatar(e) {
				this.upload_img(e.detail.avatarUrl).then(res => {
					if (res.code == 1) {
						profile({ avatar: res.data.fullurl }).then(res => {
							if (res.code == 1) {
								this.get_user()
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// 修改用户昵称
			set_name() {
				profile({ username: this.user_info.username }).then(res => {
					if (res.code == 1) {
						this.get_user()
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			logout() {
				logout().then(res => {
					if (res.code == 1) {
						// 清除缓存,vuex用户信息
						uni.clearStorageSync()
						this.set_user_info('')
						this.$me_scoket.close()
						this.$refs.uToast.show({
							type: 'success',
							message: res.msg,
							duration: 2000,
							complete: () => {
								uni.navigateBack({
									delta: 1
								})
								// uni.switchTab({
								// 	url:'/pages/'
								// })
							}
						})
					} else {
						this.$refs.uToast.show({
							type: 'default',
							title: res.msg,
							duration: 2000,
						})
					}
				})
			},
			bd() {
				if (this.user_info.openid) { //存在openid解绑
					remove().then(res => {
						if (res.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
							this.get_user()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				} else {
					uni.login({
						success: (res) => {
							console.log(res)
							binding({ code: res.code }).then(res => {
								if (res.code == 1) {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
									this.get_user()
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #ffffff;

		button {
			padding: 0rpx;
			background: none;
			line-height: normal;
		}

		button::after {
			border: none;
		}

		.item {
			padding: 25rpx 30rpx;

			.left {
				font-weight: 400;
				font-size: 33rpx;
				color: #3D3D3D;
			}

			.right {
				font-weight: 400;
				font-size: 33rpx;
				color: #3D3D3D;

				.avatar {
					width: 55rpx;
					height: 55rpx;
					border-radius: 50%;
				}

				.go {
					margin-left: 10rpx;
					width: 32rpx;
					height: 32rpx;
				}

				.name_ipt {
					text-align: right;
				}
			}
		}

		.logout {
			padding: 30rpx;
			margin-top: 60rpx;

			.btn {
				height: 81rpx;
				background: #EE4133;
				border-radius: 47rpx 47rpx 47rpx 47rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}
</style>